import React from 'react';
import { Dropdown, Menu } from 'antd';
import cass from 'classnames';
import styles from './index.module.less';
import logout from '../../utils/logout';
import UpdateModal from '../../components/UpdateModal';
import config from '../../config';

const { baseUrl } = config;

const checkMsg = {
    0: '服务器暂无资源更新，已是最新版本。',
    1: '现在使用的已是最新版本，不用更新。',
    2: '检测到新版本(), 更新需要重启应用，避免新功能无法使用请下载更新再使用！',
};
class BottomMenu extends React.Component {

    state = {
        show: false,
        text: '',
        version: ''
    }

    componentWillMount() {
        // 检查更服务器版本信息
        const { ipcRenderer, remote } = window.electron;
        ipcRenderer.on("checkNewVersionCallback", (event, data) => {
            // console.log('-----checkNewVersionCallback-----', data);
            const { status, currentVersion: version, serviceVersion } = data;
            const setData = { text: checkMsg[status], status, version };

            // 有更新的时候，每天第一次使用都弹框提示
            if (status === 2) {
                setData.text = checkMsg[status].replace('()', `(${serviceVersion})`);
                const store = remote.getGlobal('store');
                const dateStr = store.get('dateStr');
                // console.log('--dateStr--', dateStr);
                const nowDate = new Date();
                const nowDateStr = `${nowDate.getFullYear()}${nowDate.getMonth() + 1}${nowDate.getDate()}`;
                if (!dateStr || dateStr !== nowDateStr) {
                    store.set({ dateStr: nowDateStr });
                    setData.show = true;
                }
            }

            this.setState(setData);
        });

        this.checkNewVersion();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.activeIndex !== nextProps.activeIndex) {
            this.checkNewVersion();
        }
    }

    checkNewVersion = () => {
        // 检查更服务器版本信息
        const { ipcRenderer } = window.electron;
        //  更新的资源不是同一个服务，要去掉端口号
        const urlObj = new window.URL(baseUrl);
        ipcRenderer.send("checkNewVersion", `${urlObj.protocol}//${urlObj.hostname}`);
    }

    renderMenu(hasNew) {
        return (
            <Menu onClick={({ key }) => this[key]()}>
                <Menu.Item key="onUpdate">
                    <div className={cass('nodrag')}>
                        版本更新
                        {hasNew ? <span className={cass('mdi', 'mdi-circle', styles.indot)} /> : null}
                    </div>
                </Menu.Item>
                <Menu.Item key="onLogout"><div className="nodrag">退出登录</div></Menu.Item>
            </Menu>
        );
    }

    onUpdate = () => {
        this.setState({ show: true });
    }

    onLogout = () => {
        logout();
    }

    render() {
        const { show, status, text, version } = this.state;
        const hasNew = status === 2;
        return (
            <>
                <Dropdown overlay={this.renderMenu(hasNew)} trigger={['click']} placement="topLeft">
                    <span
                        className={cass('mdi mdi-menu', styles.menu)}
                    >
                        {hasNew ? <span className={cass('mdi', 'mdi-circle', styles.hasNew)} /> : null}
                    </span>
                </Dropdown>
                <UpdateModal
                    show={show}
                    text={text}
                    status={status}
                    version={version}
                    onCancel={() => this.setState({ show: false })}
                />
            </>
        );
    }
}

export default BottomMenu;
